<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(function(){
  var bar = '<div style="bottom:10px;right:10px;position:fixed;border-radius:15px"><div class="bar" style="float:left;height:48px;border:1px solid #e44853;text-align:center;line-height:50px">'
    +'<i class="icon99" style="width:50px;height:48px;float:left;background:#e44853 url(./icon.png) no-repeat -53px -54px"></i>'
    +'<i class="text" style="padding:17px 27px;font-style:normal;font-size:16px;font-family:Microsoft Yahei;color:#dd424d">最近联系人</i></div>'
    +'<div class="icon98" style="float:right;width:8px;height:50px;background:#e44853 url(./icon.png) no-repeat -120px -41px"></div></div>'
    +'<div class="list" style="position:fixed;width:318px;bottom:70px;right:10px;border:1px solid #d1d1d1;box-shadow:0 1px rgba(0, 0, 0, 0.3)"><div class="list-top" style="height:32px;color:#fff;font-size:16px;font-family:Microsoft Yahei;background:#dd424d"><i style="width:40px;height:32px;float:left;background:url(./icon.png) no-repeat -228px 9px"></i><i style="font-style:normal;line-height:32px">消息</i><i class="closebtn" style="width:32px;height:32px;float:right;background:url(./icon.png) no-repeat 12px -49px"></i></div>'
    +'<ul style="list-style:none;padding:0;margin:0"><li class="list-item" style="height:60px;"></li></ul>'
    +'<div class="ignore" style="height:39px;line-height:39px;border-top:#ddd 1px solid;text-indent:250px;color:#108ccc;font-size:14px;font-family:Microsoft Yahei;">忽略全部</div></div>';
  $('body').append(bar);


  var count = 0;
  setInterval(function(){
  	if (count % 2 ==0) {		
  		$('.icon99').css({"background-position-x": "-53px","background-position-y": "-54px"});
  	} else {
  		$('.icon99').css({"background-position-x": "-300px","background-position-y": "-300px"});
  	}
  		
  	count++;
  },300)
  
  var $bar =$('.bar');
  var $icon98 = $('.icon98');
  console.log($icon98.css("background-position-x"));
  $icon98.click(function(){
  	if($icon98.css("background-position-x") == "-120px"){
    $bar.animate({width:"50px"},"slow");
    $icon98.css({"background-position-x": "-180px"});    
  } else {
  	$bar.animate({width:"186px"},"slow");
  	$icon98.css({"background-position-x": "-120px"}); 
  }  
  });
  
  var $list = $('.list');
  $bar.click(function(){
  	// if($list.show()) {
  	// 	$list.hide();
  	// 	console.log('11');
  	// } else {
  	// 	$list.show();
  	// 	console.log('22');
  	$list.toggle();
  	
  })
});

      
    
// $(function(){
//   $("#flip").click(function(){
//     $("#panel").slideToggle("slow");
//   });
// });
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 


</body>
</html>